<template>
    <div>
        <Button type="primary" icon="ios-add" @click="runSql">New</Button>
        <Button type="primary" icon="ios-add">Delete</Button>
        <Button type="primary" icon="ios-add">Modify</Button>
        {{this.$route.params.id}}---{{databaseName}}
        <Input placeholder="Enter something..." style="width: 200px" />
        <Table stripe border size="small" :columns="tableColumns" :data="tableData"></Table>
    </div>
</template>

<script>
    import {createMysqlConnection} from '../../../assets/mysqlConnect'
    import {getDatabaseConfig} from '../../../assets/databaseConfig'

    var connection;

    export default {
        name: "table-list",
        data () {
            return {
                listDatabase: [],
                databaseId: null,
                databaseName: this.$route.params.id,
                tableColumns: [],
                tableData: [],
                sqlStr: "show tables"
            }
        },
        methods: {
            initTableList () {
                let databaseConfig = getDatabaseConfig();
                let parse = JSON.parse(databaseConfig);
                this.listDatabase = parse;
                this.runSql();
            },
            runSql() {
                var _this = this;
                console.log(_this.listDatabase[_this.databaseId]);
                connection = createMysqlConnection(_this.listDatabase[_this.databaseId], _this.databaseName);
                connection.connect();
                var sql = _this.sqlStr;
                connection.query(sql, function (err, result) {
                    if (err) {
                        console.log(err);
                        return;
                    }
                    if(result.length > 0) {
                        _this.tableColumns = [];
                        let j = {};
                        j.type = 'selection';
                        j.width = 50;
                        j.align = 'center';
                        _this.tableColumns.push(j);
                        for (var i = 0; i < 1; i++) {
                            let keys = Object.keys(result[i]);
                            for (let key of keys) {
                                let j = {};
                                j.title = key;
                                j.key = key;
                                _this.tableColumns.push(j);
                            }
                        }
                        _this.tableData = [];
                        for (let obj of result) {
                            _this.tableData.push(obj);
                        }
                    }
                });
                connection.end();
            }
        },
        created : function() {
            this.initTableList();
        },
        watch: {
            $route(){
                this.databaseName = this.$route.params.id;
                this.initTableList();
            },
        }
    }
</script>

<style scoped>

</style>